<template>
  <div class="materials container-public">
    <div class="page-head">
      <Head></Head>
      <Mallhead @search="handleSearch"></Mallhead>
      <HeadMenu></HeadMenu>
    </div>
    <div class="materials-con">
      <!-- <BreadCrumb secondText="仓储物流"></BreadCrumb> -->
      <div class="public-label">
        <div class="label-type" v-for="(item, index) in labelArr" :key="index">
          <div class="b">{{ item.type }}：</div>
          <span class="all" :class="{ active: item.select }" @click="getSelectAll(index)">全部</span>
          <div class="list-con" :class="{ 'is-open': item.isOpen}">
            <span
              :class="{ active: item1.select }"
              v-for="(item1, index1) in item.list"
              :key="index1"
              @click="getSelect(index, index1, item.prop)"
            >
              {{ item1.text }}
            </span>
          </div>
          <div class="shrink" @click="item.isOpen = !item.isOpen">
            {{ item.isOpen ? '收起' : '更多' }}
            <i :class="[item.isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
          </div>
        </div>
        <div class="condition-box">
          <div class="condition">
            <span>选择供应商：</span>
            <el-select size="small" clearable v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="condition-box">
          <span>选中条件：</span>
          <div class="condition">
            <span v-for="(item, index) in labelArr" :key="index">
              <span v-for="(item1, index1) in item.list" :key="index1">
                <el-tag size="small" v-if="item1.select" closable="" @close="getSelect(index, index1)">{{ item1.text }}</el-tag>
              </span>
            </span>
          </div>
        </div>
      </div>
      <div class="pulick-result-show">
        <!-- <el-tabs v-model="activeName" @tab-click="_intStorageList">
          <el-tab-pane label="全部" name="0"></el-tab-pane>
          <el-tab-pane label="企业交易商" name="1"></el-tab-pane>
          <el-tab-pane label="个人交易商" name="2"></el-tab-pane>
        </el-tabs> -->
        <el-table
          v-loading="loading"
          :data="tableData"
          :header-cell-style="tableHeader"
          :default-sort="{ prop: 'date', order: 'descending' }"
          style="width: 100%"
          class="pulic-table"
        >
          <el-table-column prop="title" label="仓储名称" align="center">
            <template slot-scope="scope">
              <div class="goods-item">
                <b>{{ scope.row.title }}</b>
                <div class="img"></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发布时间"> </el-table-column>
          <el-table-column prop="expirationName" label="发布商家"> </el-table-column>
          <el-table-column prop="unitPrice" label="价格">
            <template slot-scope="scope">
              <div class="price-item">
                <div>
                  <span class="blue">{{ scope.row.unitPrice }}</span>
                  <span>元/m²起</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系方式">
            <template slot-scope="scope">
              <div>{{scope.row.linkMan}}</div>
              <div>{{scope.row.phone}}</div>
            </template>
          </el-table-column>

          <el-table-column label="操作"   align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="goDetail(scope.row)">查看</el-button>
              <el-button type="primary" size="mini" @click="goDetail">我要看仓</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { intStorageList } from "@/api/mall/Logistics";
import areaData from "@/mixins/areaData"
export default {
  name: "Logistics",
  mixins: [areaData],
  data() {
    return {
      loading: false,
      labelArr: [
        {
          type: "所属区域",
          prop: 'region',
          select: true,
          isOpen: false,
          list: [],
        },
        {
          type: "所属位置",
          prop: 'location',
          select: true,
          isOpen: false,
          list: [],
        },
        {
          type: "是否高标仓",
          prop: 'highStandard',
          select: true,
          isOpen: false,
          list: [],
        },
        {
          type: "仓库类型",
          prop: 'storageType',
          select: true,
          isOpen: false,
          list: [],
        },
        {
          type: "可租面积",
          prop: 'rentableArea',
          select: true,
          isOpen: false,
          list: [],
        },
        {
          type: "租赁单价",
          prop: 'unitPrice',
          select: true,
          isOpen: false,
          list: [],
        },
      ],
      searchValue: '',
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      activeName: "0",
      tableHeader: {
        background: "#f0f2f5",
      }, // 表头颜色加粗设置
      tableData: [],
    };
  },
  created() {
    const regionList = this.getProvince().map(item => {
      return {
        text: item.label,
        value: item.label,
        select: false
      }
    })
    this.$set(this.labelArr[0], 'list', regionList)
    const labelList = ["high_standard", "storage_type", 'rentable_area', 'unit_price']
    labelList.forEach((item, index) => {
      this.getDicts(item).then(response => {
        const options = response.data.map(item => {
          return {
            text: item.dictLabel,
            value: item.dictValue,
            select: false
          }
        })
        this.$set(this.labelArr[index+2], 'list', options)
      });
    })
  },
  mounted() {
    this._intStorageList()
  },
  methods: {
    handleParams () {
      return this.labelArr.reduce((pre, next) => {
        const select = next.list.reduce((pre1, next1) => {
          if (next1.select) {
            const value = ['rentableArea', 'unitPrice'].includes(next.prop) ? next1.value : next1.text
            pre1.push(value)
          }
          return pre1
        }, [])
        pre[next.prop] = select.join(',')
        return pre
      }, {})
    },
    // 查询原材料采购列表
    async _intStorageList() {
      const params = {
        searchValue: this.searchValue,
        // type: this.activeName,
        ...this.handleParams()
      }
      this.loading = true
      const res = await intStorageList(params).finally(() => {
        this.loading = false
      })
      if (res.code === 200) {
        this.tableData = res.rows
      }
    },
    // 搜索
    handleSearch (search) {
      this.searchValue = search
      this._intStorageList()
    },
    getSelect(index, index1, prop) {
      let temItem = this.labelArr[index];
      // 所属区域-单选
      if (prop === 'region') {
        temItem.list.forEach((item, i) => {
          if (index1 === i) {
            temItem.list[index1].select = !temItem.list[index1].select;
          } else {
            item.select = false;
          }
        })
        const region = temItem.list.filter(item => item.select)[0] ? temItem.list.filter(item => item.select)[0].text : null
        this.handleLocationOption(region)
      } else {
        temItem.list[index1].select = !temItem.list[index1].select;
      }
      if (temItem.list.some(item => item.select)) {
        temItem.select = false
      }
    },
    // 全选
    getSelectAll (index) {
      let temItem = this.labelArr[index];
      temItem.select = !temItem.select
      temItem.select && temItem.list.forEach(item => {
        item.select = false;
      })
    },
    // 获取所属位置
    handleLocationOption (region) {
      const locationList = this.getRegion(region, true).map(item => {
        return {
          text: item.label,
          value: item.label,
          select: false
        }
      })
      this.$set(this.labelArr[1], 'list', locationList)
    },
    goDetail() {
      this.message.error('暂无')
    },
  },
};
</script>
<style scoped>
::v-deep .el-table .cell {
  overflow: unset;
}
</style>
<style scoped lang='scss'>
@import "@/style/color.scss";
.materials-con {
  width: $bigWidth;
  background-color: #fff;
  margin: 0 auto;
}
</style>